<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul class="a">
      <li>11111</li>
    </ul>

    <ul class="b">
      <li>11111</li>
    </ul>
    <script>
      // 真正的DOM结构
      const dom1 = document.querySelector('ul.a')
      const dom2 = document.querySelector('ul.b')
      console.dir(dom1)
      console.dir(dom2)
      // 比较真正的DOM结构太复杂。而且也不需要比较那么多
      // 在比较两个DOM结构的时候，只比较一些有用的即可。
      // 为此，Vue弄了一个虚拟DOM，就是一个JS对象，里面只存储一些有用的属性

      const vDom1 = {
        tag: 'ul',
        text: '',
        classList: 'a',
        id: '',
        children: [],
        attr: []
      }

      const vDom2 = {
        tag: 'ul',
        text: '',
        classList: 'b',
        id: '',
        children: [],
        attr: []
      }
    </script>
  </body>
</html>
